<template>
  
<!-- 主体区域 -->
<section id="app">
  <TodoHeader @addTodoName = "add"></TodoHeader>
  <TodoMain :list = "list" @sendId = "del"></TodoMain>
  <TodoFooter v-show="list.length>0" :list = "list" @clearList = "clear"></TodoFooter>
 
</section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data(){
    return {
       list: JSON.parse(localStorage.getItem('list')) || [
        { id: 1, name: '跑步一公里' },
        { id: 3, name: '游泳100米' },
      ]
    }
  },
  // 存储
  watch:{
    list:{
      deep:true,
      handler(value){
        localStorage.setItem('list',JSON.stringify(value))
      }
    }
  },
  methods:{
    // 添加
    add(value){
      this.list.unshift({
        id: +new Date(),
        name:value
      })
    },
    // 删除
    del(id){
      this.list =  this.list.filter(item => item.id !==id)
    },

    // 清空
    clear(){
      this.list = []
    }
  },
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  }
}
</script>

<style>
</style>